<template>
    <!-- html -->
    <el-card class="box-card" shadow="hover">
        <template #header>
            <div class="card-header">
                <span>用户信息</span>
                <el-button class="button" type="primary" size="small">编辑</el-button>
            </div>
        </template>
        <el-input v-model="msg.Id" placeholder="请输入id" />
        <el-input v-model="msg.Name" placeholder="请输入name" />
        <el-input v-model="msg.Password" placeholder="请输入passwd" />
        <el-button class="button" type="primary" @click="LoginFunc" size="small">登录</el-button>
        <hr>
        </hr>
        <el-input v-model="msg.userId" placeholder="请输入用户id" />
        <el-input v-model="msg.userMsg" placeholder="请输入发送的消息" @keyup.enter="PrivatehandleEnter" />
        <hr>
        </hr>
        <el-input v-model="msg.message" placeholder="请输入内容,公共发出" @keyup.enter="handleEnter" />
        <ul>
            <li v-for="(fruit, index) in msg.list" :key="index">
                {{ fruit }}
            </li>
        </ul>
        <hr>
        </hr>
        <div>
            <!-- 原生 input 文件选择 -->
            <input type="file" @change="handleFileChange" />

            <!-- 上传按钮 -->
            <button @click="submitUpload" :disabled="!selectedFile">
                上传文件
            </button>

            <!-- 上传进度 -->
            <div v-if="uploadProgress > 0">
                上传进度：{{ uploadProgress }}%
                <progress :value="uploadProgress" max="100"></progress>
            </div>
            <!-- 解析进度 -->
            <div v-if="uploadProgressJIexi > 0">
                上传进度：{{ uploadProgressJIexi }}%
                <progress :value="uploadProgressJIexi" max="100"></progress>
            </div>
        </div>
    </el-card>
</template>

<script lang="ts" setup name="Singlr">
import { ElCard, ElButton, ElInput } from 'element-plus'
import 'element-plus/dist/index.css'
import Singlrs from '@/utils/Singlr'

const { msg, selectedFile, uploadProgress, uploadProgressJIexi, handleFileChange, submitUpload, handleEnter, LoginFunc, PrivatehandleEnter } = Singlrs()
const format = (percentage: any) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
/* 样式 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-progress .el-progress--line {
    width: 200px;
    margin-bottom: 15px;
    /* max-width: 600px; */
}

.box-card {
    width: 400px;
}
</style>